<template>
  <div>
    <el-container>
      <el-header>
        <div class="header">
          <div class="s">
            <img class="tu" src="/image/ldz.png" alt="" />
          </div>
          <div class="mm xiangmu">
            <el-input
              class="inp"
              size="small"
              clearable
              v-model="input"
              placeholder="请输入内容"
            >
            </el-input>
            <el-button
              class="btn"
              size="mini"
              type="primary"
              icon="el-icon-search"
              >搜索
            </el-button>
            <div class="resou">
              <a class="rs" href="#">热搜 &nbsp;</a>
              <b>|</b>
              <a class="a" href="#">芒果干&nbsp;</a>
              <b>|</b>
              <a class="a" href="#">&nbsp;虎皮风爪&nbsp;</a>
              <b>|</b>
              <a class="a" href="#">&nbsp;奥利奥&nbsp;</a>
              <b>|</b>
              <a class="a" href="#">&nbsp;奥利奥&nbsp;</a>
            </div>

            <div class="tz" v-if="uname == null">
              <router-link class="dl" to="/login">登录</router-link>
              <b>|</b>
              <router-link class="zc" to="/register">注册</router-link>
            </div>
            <div v-else class="huanying">
              <li>
                <a>&nbsp;欢迎{{ uname }}</a>
                <a @click="updateuname">&nbsp;退出</a>
              </li>
            </div>
          </div>
          <div class="dhl">
            <ul>
              <li class="aa">
                <router-link
                  to="/"
                  :class="{
                    'router-link-exact-active': $route.name == 'Index',
                  }"
                  >门店首页</router-link
                >
              </li>
              <li class="aa">
                <router-link to="/news">新闻中心</router-link>
              </li>
              <li class="aa">
                <router-link
                  to="/jiament"
                  :class="{
                    'router-link-exact-active': $route.name == 'Jiament',
                  }"
                  >加盟合作</router-link
                >
              </li>
              <li class="aa">
                <router-link to="dianmian">门店展示</router-link>
              </li>
              <li class="aa">
                <router-link to="/gongjian">公司简介</router-link>
              </li>
              <li class="aa">
                <router-link to="/lianxi">联系我们</router-link>
              </li>
            </ul>
          </div>
        </div>
      </el-header>
    </el-container>
  </div>
</template>


<script>
import { mapMutations, mapState } from "vuex";
export default {
  watch: {
    $route(newValue) {
      console.log(newValue);
    },
  },
  computed: {
    ...mapState(["uname"]),
  },
  methods: {
    ...mapMutations(["updateuname"]),
    updateuname() {
      this.uname == null;
      // 清空localstorage中用户名
      localStorage.removeItem("uname");
      console.log(this.$route);
      this.$router.push("/login");
    },
  },
  data() {
    return {
      input: "",
      activeIndex: "1",
    };
  },
};
</script>

<style src="../assets/css/header.css" scoped>
.router-link-exact-active {
  background-color: pink;
  padding: 0 75px;
  border: 15px solid pink;
}
</style>